/*
 *  Copyright 2025 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
@import (reference) '../../../../styles/variables.less';
@import (reference) '../../../../styles/fonts.less';

// Override widget wrapper for announcement widget
.announcements-widget-v1-wrapper {
  background: @severity-6-background !important;
  box-shadow: none !important;

  &:hover {
    box-shadow: none !important;
  }

  .ant-card-body {
    background: transparent !important;
  }

  .widget-wrapper-content {
    background: transparent !important;
  }
}

.announcements-widget-v1-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent !important;
  border-radius: @border-rad-lg;
  overflow-y: auto;
  width: 100%;
  max-height: 298px;

  .ant-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
    overflow: hidden;
    background: transparent !important;
  }

  .widget-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: transparent !important;
  }
}

.announcements-widget-v1-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @padding-lg @padding-lg @padding-sm @size-mlg;
  background: transparent !important;

  .header-left {
    display: flex;
    align-items: center;
    gap: @padding-xs;
    flex: 1;
    background: transparent !important;

    .header-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: @size-lg;
      height: @size-lg;
      color: @white;
      background: transparent !important;

      svg {
        width: @size-lg;
        height: @size-lg;
      }
    }

    .header-title {
      color: @white;
      font-weight: @font-semibold;
      font-size: @font-size-base;
      margin: 0;
      line-height: 1.2;
      background: transparent !important;
    }

    .announcement-count-badge {
      .ant-badge-count {
        background: @white;
        color: @primary-color;
        font-weight: @font-semibold;
        border: 1px solid @white;
        min-width: @size-lg;
        height: @size-lg;
        line-height: 22px;
        border-radius: @border-rad-lg;
        font-size: @size-sm;
      }
    }
  }

  .close-button {
    color: @white;
    border: none;
    background: transparent !important;
    width: @size-lg;
    height: @size-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.1) !important;
      color: @white;
    }

    .anticon {
      font-size: @font-size-base;
    }
  }
}

.announcements-widget-v1-content {
  flex: 1;
  padding: @size-mlg;
  padding-top: 0;
  overflow-y: auto;
  background: transparent !important;
}

.announcement-cards-container {
  display: flex;
  flex-direction: column;
  gap: @padding-sm;
  background: transparent !important;
}
